<template>
    <div class="fullScreen bg-c-g" ref="tradingRecords">
        <!-- header -->
        <m-header :msg="'交易记录'"></m-header>
        <!-- tab -->
        <tab-temp :tabArr="['快捷支付', '存款', '提现']"></tab-temp>
        <!-- 快捷支付列表 -->
        <mescroll-vue v-show="$store.state.tabTogIndex == 0" ref="mescroll0" :up="mescrollUp0" @init="mescrollInit0">
            <no-data v-if="status[0]"></no-data>
            <div class="flex-box bg-c-wh" v-for="(item, index) in list[0]" :key="index">
                <div class="flex-box month">
                    <span>{{ item.month }}</span>
                </div>
                <div class="circle-t" :class="{'bg-c-o': item.month }"></div>
                <div class="flex-f1 data-details bor-b-g">
                    <div class="flex-box mar-tb">
                        <div class="tx-c-666">{{ item.no }}</div>
                    </div>
                    <div class="flex-box flex-pj mar-tb">
                        <div class="tx-c-666">{{ item.createTime }}</div>
                        <div class="tx-c-r">{{ item.flowMoney }}</div>
                    </div>
                </div>
            </div>
        </mescroll-vue>
        <mescroll-vue v-show="$store.state.tabTogIndex == 1" ref="mescroll1" :up="mescrollUp1" @init="mescrollInit1">
            <!-- 存款列表 -->
            <no-data v-if="status[1]"></no-data>
            <my-trading :index="1" :dataList="list[1]"></my-trading>
        </mescroll-vue>
        <mescroll-vue v-show="$store.state.tabTogIndex == 2" ref="mescroll2" :up="mescrollUp2" @init="mescrollInit2">
            <!-- 提现列表 -->
            <no-data v-if="status[2]"></no-data>
            <my-trading :index="2" :dataList="list[2]"></my-trading>
        </mescroll-vue>
    </div>
</template>

<script type="text/ecmascript-6">
import MHeader from '../../components/m-header'
import TabTemp from '../../components/tabTemp'
import MescrollVue from 'mescroll.js/mescroll.vue'
import MyTrading from '../../components/myTradingTemp'
import NoData from '../../components/noData'
import { isEmptyObject } from '../../common/js/common'
import { trade } from '../../common/js/axiosUtil' 
export default {
    data() {
        return {
            index: this.$route.query.id || '0',
            type: [
                'cz', 'xxcz', 'tx'
            ],
            list: [
                [], [], []
            ],
            monthSign : [
                '', '', ''
            ],
            status: [
                false, false, false
            ],
            orderStatus : [
                '待审核','已成功','已拒绝','待审核'
            ],
            mescrollArr: new Array(3),// mescroll实例对象
            mescrollUp0: { // 上拉加载的配置.
                callback: this.upCallback0, // 上拉回调
                htmlNodata: '<p class="upwarp-nodata">没有更多数据了</p>',
                noMoreSize: 5 
            },
            mescrollUp1: { // 上拉加载的配置.
                callback: this.upCallback1, // 上拉回调
                htmlNodata: '<p class="upwarp-nodata">没有更多数据了</p>',
                noMoreSize: 5 
            },
            mescrollUp2: { // 上拉加载的配置.
                callback: this.upCallback2, // 上拉回调
                htmlNodata: '<p class="upwarp-nodata">没有更多数据了</p>',
                noMoreSize: 5 
            }
        }
    },
    methods: {
        // 处理月份显示样式
        monthFlag (data, type) {
            let theMonth = new Date().getMonth()+1
            for(let i=0; i<data.length; i++){
                let m = data[i].createTime.substr(5,2)
                if( this.monthSign[type] == m){
                    data[i].month = ''
                }else{
                    this.monthSign[type] = m
                    if(i == 0 && m == theMonth){
                        data[i].month = '本月'
                    }else{
                        data[i].month = m + '月'
                    }
                }
            }
            // 把请求到的数据添加到列表
            this.list[type] = this.list[type].concat(data)
        },
        getTrade (type, page, count) {
            let params = this.$params(1)
            params.append('range', this.type[type])
            params.append('count', count)
            params.append('page', page)
            trade(params)
            .then((response)=> {
                if(response.data.code == "200"){
                    const {data} = response.data
                    if(isEmptyObject(data)){ 
                        if(page === 1){
                            // 没有数据时显示提示界面,隐藏下拉刷新和上拉加载的状态;
                            this.mescrollArr[type].endErr()
                            this.status[type] = true
                        }else{
                            // 上一页数据为10条本页数据为0时,显示提示信息并禁止上拉事件
                            this.$nextTick(() => {
                                this.mescrollArr[type].endSuccess(data.length)
                            })
                        }
                    }else{
                        // 如果是第一页需手动制空列表
                        if (page === 1) {
                            this.list[type] = []
                        }
                        // 处理月份显示样式
                        this.monthFlag(data, type)
                        // 数据渲染成功后,隐藏下拉刷新的状态
                        this.$nextTick(() => {
                            this.mescrollArr[type].endSuccess(data.length)
                        })
                    } 
                    // 数据层次太多，没有触发render函数进行自动更新，需手动调用
                    this.$forceUpdate()
                } else { 
                    this.mescrollArr[type].endErr()
                    this.$logAgain(response.data.msg)
                }
            })
            .catch((error)=> {
                // 联网失败的回调,隐藏下拉刷新和上拉加载的状态;
                this.mescrollArr[type].endErr()
                this.$toast('请求服务失败', 2000)
            });
        },
        // mescroll组件初始化的回调,可获取到mescroll对象
        mescrollInit0 (mescroll) {
            this.mescrollArr[0] = mescroll
        },
        mescrollInit1 (mescroll) {
            this.mescrollArr[1] = mescroll
        },
        mescrollInit2 (mescroll) {
            this.mescrollArr[2] = mescroll
        },
        // 上拉回调 page = {num:1, size:10}
        upCallback0 (page) {
            this.getTrade(0, page.num, page.size)
        },
        upCallback1 (page) {
            this.getTrade(1, page.num, page.size)
        },
        upCallback2 (page) {
            this.getTrade(2, page.num, page.size)
        }
    },
    components: { 
        MHeader,
        TabTemp,
        MescrollVue,
        MyTrading,
        NoData
    }
}
</script>

<style scoped lang="stylus" rel="stylesheet/stylus"> 
@import "~common/stylus/variable"
    /*通过fixed固定mescroll的高度*/
    .mescroll
        position: absolute
        top: 5.75rem
        bottom: 0
        height: auto 
    .month
        width: 20%
        justify-content: center
        align-items: center
        font-size: $fonts-10
        color: $color-6
        border-right: 1px solid #ffdabe
    .circle-t
        height: .5rem
        width: .5rem
        border-radius: 100% 100%
        position: relative
        top: 1.5rem
        left: -.25rem 
    .data-details
        margin: 0 5%
        line-height: 1rem
        font-size: $fonts-12
    .mar-tb
        margin: .5rem 0
</style>